<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        @close="clear"
        class="companies-dialog"
        width="800px">
        <section class="dialog-body">
            <el-tabs value="suppliers-and-customers" class="suppliers-and-customers">
                <el-tab-pane label="数据对比" name="suppliers-and-customers">
                    <section class="table-container" >
                        <section class="suppliers" >
                            <el-table
                            style="font-size: 16px"
                                :data="riskLevelData"
                                tooltip-effect="dark">
                                <el-table-column
                                    width="60"
                                    prop="name"
                                    align="center">
                                </el-table-column>
                                <el-table-column
                                    prop="company"
                                    label="公司数值">
                                </el-table-column>
                                <el-table-column
                                    prop="standard"
                                    label="税务标准值">
                                </el-table-column>
                            </el-table>
                        </section>
                    </section>
                </el-tab-pane>
            </el-tabs>
             <el-tabs value="suppliers-and-customers" class="riskTags">
                <el-tab-pane label="风险诊断" name="suppliers-and-customers">
                    <section class="table-container">
                        <section class="suppliers">
                        <el-tag v-for="(level, index) in companyData.riskLevel"
                            :key="index"
                            :type="getTypeFromLevel(level)"
                            effect="dark">
                        <span>{{level}}</span>
                        </el-tag>
                        </section>
                    </section>
                <div class="describe">
                        税负率过低，毛利率过低说明成本项出现问题；此情况下，若引起税务稽查，请重点关注成本结构
                        </div>
                </el-tab-pane>
            </el-tabs>
        </section>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            title: '',
            type: '',
            companyData: null,
            serialNumber:0,
            riskLevelData:[],
            riskLevels:[{
                serialNumber:1,
                datas: [{
                    name:"税负率",
                    company: "3.7%",
                    standard: "5%"
                    },
                {name:"毛利率",
                company: "43.2%",
                standard: "23%"}]
            },{
                serialNumber:2,
                datas: [{
                    name:"税负率",
                    company: "2.3%",
                    standard: "5%"
                    },
                {name:"毛利率",
                company: "17.8%",
                standard: "23%"}]
            }],
            // 文件列表
            balanceStatementFileList: [],
            incomeStatementFileList: [],
            bankStatementFileList: [],
            companyNameDisable: false,
            suppliersTableData: [],
            customersTableData: []
        };
    },
    mounted(){

    },
    methods: {

        /**
         * 打开弹框
         */
        open(companyData) {
            this.dialogVisible = true;
            this.companyData = companyData || {};
            // 编辑
            this.companyNameDisable = true;
            this.title = companyData.companyName;
            this.serialNumber = companyData.serialNumber;
            this.riskLevelData = this.riskLevels.find(n => n.serialNumber == this.serialNumber).datas;
        },

        getTypeFromLevel(level){
            if (level == "税负率无风险"){
                return "success"
            }else if (level == "税负率偏低"){
                return "danger"
            }else if (level == "毛利率偏高"){
                return "danger"
            }
        },

        /**
         * 添加供应商或客户
         */
        addSupplierOrcustomer(type) {
            this[`${type}sTableData`].push({
                companyName: '',
                type: 'new'
            });
        },

        /**
         * 清除表单和验证
         */
        clear() {
            // 清除数据
            this.suppliersTableData = [];
            this.customersTableData = [];
            for (let key of Object.keys(this.form)) {
                this.form[key] = '';
            }
            // 清除校验
            this.$refs.form.clearValidate();
        }
    }
}
</script>

<style lang="less" scoped>
@import '../../assets/var.less';

.dialog-body {
    max-height: 500px;
    padding: 0 30px;
    overflow: auto;
}
.suppliers-and-customers {
    .table-container {
        display: flex;
        justify-content: center;
        .suppliers{
            width:50%;
            .el-table{
                border:solid gray 1px;
            }
        }
    }
}

.riskTags{
    .suppliers{
        margin-left: 50px;
        .el-tag{
            margin-left: 2%;
            margin-right: 2%;
            span{
                font-size:16px;
            }
        }
    }
}
.describe{
    font-size: 16px;
    text-indent: 30px;
    margin-left: 20%;
    margin-top: 2%;
}

</style>
<style lang="less">
.companies-dialog .el-dialog__body {
    padding: 0;
}
</style>
